import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'tdesign-react'
import { useTranslation } from 'react-i18next'
import './index.less'
import SwitchDark from '../SwitchDark'
import ChangeLanguage from '../ChangeLanguage'

type PropsType = {
  appList: AppListType
}

const Hader = (props: PropsType) => {

  const {
    appList = []
  } = props

  const navigate = useNavigate()
  const { t } = useTranslation(['allInOne'])

  return <div className='aio-header'>
    <div className='aio-control'>
      <SwitchDark />
      <div className='title'>{t('title')}</div>
      <ChangeLanguage />
    </div>
    <div className='aio-change-app'>
      <div className='title'>{t('switchApp')}</div>
      <div className='change-app-buttons'>
        {appList.map((item: any) => {
          return <Button
            className='change-app-button'
            onClick={() => { navigate(item.path) }}
            key={item.name}
          >{item.name}</Button>
        })}
      </div>
    </div>
  </div>
}

export default Hader
